{% extends 'app01/moban/bassic.html' %}

{% block title %}项 目 管 理{% endblock %}
{% block css %}
    <style>
        .project {
            height: 80px;
            margin-left: 30px;
            margin-right: 30px;

        }

        .project label {
            font-size: 50px;
            font-weight: normal;
            color: #8E8D8E;
        }

        .project_1 {
            margin-top: 20px;
            margin-left: 30px;
            margin-right: 30px;
            border: 1px silver solid;
            border-radius: 10px 10px 10px 10px;
        }

        .project_2 {
            padding-left: 10px;
            height: 50px;
            background: #F3F2F3;
            border-bottom: 1px silver solid;
            border-radius: 10px 10px 0 0;
        }

        .project_2 i {
            line-height: 50px;
            font-size: 25px;
        }

        .project_2 label {
            font-weight: normal;
            font-size: 22px;
        }

        .project_3 {
            padding-right: 0;
            padding-left: 0;
            margin-right: 16px;
            margin-bottom: 10px;
            height: 240px;
            width: 19%;
            border: 1px silver solid;
            border-radius: 7px 7px 7px 7px;
        }

        .project_31 {
            height: 80%;
            border-radius: 7px 7px 0 0;
            padding-top: 30%;
        }

        .project_31 p {
            text-align: center;
            color: white;
        }

        .project_32 {
            height: 20%;
            background-color: #FFFFFF;
            border-radius: 0 0 7px 7px;
        }

        .span1, .span3 {
            margin-left: 10px;
            line-height: 50px;
        }

        .span2 {
            float: right;
            margin-right: 10px;
            line-height: 50px;
        }

        .span1 i {
            font-size: 25px;
            color: orange;
            cursor:pointer;
        }

        .span1 a {
            color: #0f0f0f;
        }

        .span3 i {
            font-size: 25px;
            color: #AAA8AA;
            cursor:pointer;
        }

        .span3 a {
            color: #0f0f0f;
        }


    </style>
{% endblock %}
{% block content %}

    <div class="project">
        <a data-toggle="modal" data-target="#exampleModal" data-whatever="" href="#"><i
                class="fa fa-plus-square fa-4x"></i></a><label>&nbsp;&nbsp;新建项目</label>
    </div>
    <div class="row project_1">
        <div class="project_2">
            <i class="fa fa-star fa-1x"></i><label>&nbsp;&nbsp;星标项目</label>
        </div>
        <div id="p1" class="row" style="margin: 10px 10px 10px 10px;height: 240px;">

            {% for fild in form %}
                {% if fild.star_labe == 'True' %}
                    <div class="col-xs-6 col-md-2 project_3">
                        <div class="project_31" style="background-color: {{ fild.color }}">
                            <p class='project_st'>{{ fild.project_name }}</p>
                        </div>
                        <div class="project_32">
                            <span class="span1"><a class='rel_false' onclick="label_star_f(this)"><i
                                    class="fa fa-star fa-1x">&nbsp;</i></a></span><span>&nbsp;&nbsp;{{ fild.NAME }}</span>
                            <span class="span2"><i
                                    class="fa fa-user-o fa-1x"></i>&nbsp;&nbsp;{{ fild.project_in_member_qty }}</span>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
    <div class="row project_1" style="margin-bottom: 20px">
        <div class="project_2">
            <i class="fa fa-star fa-1x"></i><label>&nbsp;&nbsp;我创建的项目</label>
        </div>
        <div id="p2" class="row" style="margin: 10px 10px 10px 10px;height: 230px; ">
            {% for fild in form %}
                    <div class="col-xs-6 col-md-2 project_3">
                        <div class="project_31" style="background-color: {{ fild.color }}">
                            <p class='project_name'>{{ fild.project_name }}</p>
                        </div>
                        <div class="project_32">
                            <span class="span3"><a class='rel_true' onclick="label_star(this)"><i
                                    class="fa fa-star fa-1x">&nbsp;</i></a></span><span>&nbsp;&nbsp;{{ fild.NAME }}</span>
                            <span class="span2"><i
                                    class="fa fa-user-o fa-1x"></i>&nbsp;&nbsp;{{ fild.project_in_member_qty }}</span>
                        </div>
                    </div>
            {% endfor %}
        </div>
    </div>
    {#    -------------------------------------模态框------------------------------------------#}
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">New message</h4>
                </div>
                <form id="projectForm" method="POST" novalidate>
                    {% csrf_token %}
                    <div class="modal-body">

                        <div class="form-group">
                            <label for="recipient-name" class="control-label">项目名:</label>
                            <input type="text" class="form-control" id="recipient-name">
                            <span id=error style="color: #b92c28"></span>
                        </div>
                        {#                        ==============================================================#}
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">选择颜色:</label><br>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default dropdown-toggle colorb" id = 'colorBtt' data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false" style="background-color: #10326F; color: #FFFFFF">
                                    #10326F <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li class="color" style=""><a href="#">#10326F</a></li>
                                    <li class="color" style=""><a href="#">#25B886</a></li>
                                    <li class="color" style=""><a href="#">#EA4335</a></li>
                                    <li class="color" style=""><a href="#">#FCC424</a></li>
                                    <li class="color" style=""><a href="#">#34A853</a></li>
                                    <li class="color" style=""><a href="#">#6495ED</a></li>
{#                                    <li role="separator" class="divider"></li>#}
{#                                    <li><a href="#">Separated link</a></li>#}
                                </ul>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">项目描述:</label>
                            <textarea class="form-control" id="message-text" style="height: 150px"></textarea>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary">创建</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script>
        $(function () {
            insert()
            colorButton()
            //label_star()
            // label_star_f()
        })

        // 新增项目
        function insert() {
            $('.btn-primary').click(function () {
                var name = $('#recipient-name').val();
                var text = $('#message-text').val();
                var csrftoken = $('[name="csrfmiddlewaretoken"]').val();
                var error = document.getElementById('error');
                error.innerText = ''
                var project_color = document.getElementById('colorBtt').innerText.trim();
                $.ajax({
                    url: "",
                    type: "POST",
                    data: {
                        'csrfmiddlewaretoken': csrftoken,
                        'project_name': name,
                        'project_text': text,
                        'project_color':project_color
                    },
                    success: function (res) {
                        if (res.status) {
                            location.href = res.data
                        } else {
                            error.innerText = res.error
                        }
                    }
                })
                {#var row = document.getElementById('p2')#}
                {#var project_mb = document.createElement('div')#}
                {#var mx = document.createAttribute('class')#}
                {#mx.value = 'col-xs-6 col-md-2 project_3'#}
                {#project_mb.setAttributeNode(mx)#}
                {#row.appendChild(project_mb)#}
            })
        }

        // 选择框
        function colorButton() {
            var h = $('.color');

            h.click(function () {
                document.getElementsByClassName('colorb')[0].innerHTML = this.innerText+'&nbsp;<span class="caret"></span>';
                document.getElementsByClassName('colorb')[0].getAttributeNode('style').value = 'color: #FFFFFF;background-color:'+this.innerText;
            })
        }

        // 我创建的项目
        function label_star(sel) {
            //$(this).click(function () {
            var csrftoken = $('[name="csrfmiddlewaretoken"]').val();
            var ss = sel.parentNode.parentNode.previousSibling.previousSibling.childNodes[1];
            var project_name = ss.innerText;
            var label = 'True'
            $.ajax({
                url: '{% url 'app01:starlabel' %}',
                type: 'POST',
                data: {
                    'csrfmiddlewaretoken': csrftoken,
                    'project_name': project_name,
                    'label': label
                },
                success: function (res) {
                    location.reload()
                }
            })
            // })
        }

        // 星标项目
        function label_star_f(sel) {
            // $(this).click(function () {
            var csrftoken = $('[name="csrfmiddlewaretoken"]').val();
            var ss = sel.parentNode.parentNode.previousSibling.previousSibling.childNodes[1];
            var project_name = ss.innerText
            var label = 'False'
            $.ajax({
                url: '{% url 'app01:starlabel' %}',
                type: 'POST',
                data: {
                    'csrfmiddlewaretoken': csrftoken,
                    'project_name': project_name,
                    'label': label
                },
                success: function () {
                    location.reload()
                }
            })
            // })

        }

        // 模态框
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var recipient = button.data('whatever') // Extract info from data-* attributes
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this)
            modal.find('.modal-title').text('创建项目' + recipient)
            modal.find('.modal-body input').val(recipient)
        })
    </script>
{% endblock %}